<template>
  <div class="page">
    <div v-if="group && group.state == 'normal'">
      <div class="pd bd-b">
        <div class="">
          <div class="bg-white fs-2 fw" v-if="group.name">{{group.name}}</div>
          <div class="bg-white fs-2 fw" v-else="group.name"><open-data type="groupName" :open-gid="group.openGroupId"></open-data></div>
        </div>
      </div>
      <div class="bg-white pd pdb-0">
        <div class="pdb c-gray fs-4">班主任</div>
        <div class="weui-flex v-mdl">
          <div>
            <div style="width: 40px;">
              <avatar :src="group.owner.avatarUrl"></avatar>
            </div>
          </div>
          <div class="weui-flex__item pdl" v-if="group && group.owner && group.owner.nickName">
            {{group.owner.nickName}}
          </div>
        </div>
      </div>
      <div class="bg-white pd">
        <div class="c-gray fs-4">同学</div>
        <div v-for="(n, i) in group.members" :key="i" class="weui-flex v-mdl pdv-s bd-b-light">
          <div style="width: 40px;">
            <avatar :src="n.avatarUrl"></avatar>
          </div>
          <div class="weui-flex__item pdl">
            {{n.name || n.nickName}}
            <span v-if="n.roleName != '本人'">({{n.roleName}})</span>
          </div>
          <div class="ta-r" v-if="n.userId == loginer.id">
            <notify-btn cls="ui btn link" @hit="onModifyName(n.name || n.nickName)">修改姓名</notify-btn>
          </div>
        </div>
      </div>
    </div>
    <div v-if="group && group.state == 'disbanded'" class="ta-c pd-xl c-gray">
      班级已解散
    </div>
    <side-menu v-if="isShowSideMenu"></side-menu>
    <page-common></page-common>
  </div>
</template>

<script>
import * as $group from '@/api/group'
import base from '@/mixins/base'
import Avatar from '@/components/avatar'
import Pop from '@/components/pop'
import NotifyBtn from '@/components/notify-btn'
import { mapGetters, mapActions } from 'vuex'
import PageCommon from '@/components/page-common'
import SideMenu from '@/components/side-menu'

export default {
  mixins: [base],
  components: {Avatar, Pop, PageCommon, SideMenu, NotifyBtn},
  data () {
    return {
      isPageNeedAuthUser: true,
      isShowP1: false,
    }
  },
  computed: {
    ...mapGetters('group', [
      'group'
    ]),
    ...mapGetters([
      'loginer'
    ]),
  },
  async onPullDownRefresh() {
    try {
      let {groupId} = this.getParams()
      this.getById({groupId, cache: false})
      wx.stopPullDownRefresh()
    } catch (e) {
      this.$debug({err: e})
    }
  },
  methods: {
    ...mapActions('group', [
      'getById'
    ]),
    async loginBack () {
      try {
        let {groupId} = this.getParams()
        await this.getById({groupId, cache: false})
      } catch (e) {
        this.$debug({err: e})
      }
    },
    onNameChange (e) {
      this.slotData.name = e.mp.detail.value
    },
    onModifyName (name) {
      let {groupId} = this.getParams()
      wx.navigateTo({
        url: '/pages/group-modify-name/main?groupId=' + groupId + '&name=' + name
      })
    }
  },
  watch: {
  }
}
</script>
